<template>
  <view v-if="shenheStatus == 0" class="page">
    <template v-if="data">
      <pageSwiper
        :data="{
          items: data.pic_url,
          index: swiperIndex,
        }"
      ></pageSwiper>

      <pageInfo :data="data"></pageInfo>
      <pageList :data="data"></pageList>
      <pageFooter :totalPrice="totalPrice"></pageFooter>
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import pageList from "./components/page-list.vue";
import pageSwiper from "./components/page-swiper.vue";
import pageInfo from "./components/page-info.vue";
import pageFooter from "./components/page-footer.vue";
import { workerInfo } from "@/api/marketing/callOut";

export default {
  components: {
    Shenhe,
    pageList,
    pageSwiper,
    pageInfo,
    pageFooter,
  },

  data() {
    return {
      data: null,
      swiperIndex: 0,
      id: undefined,
      longitude: "",
      latitude: "",
      favorite_num: 0,
    };
  },

  computed: {
    totalPrice() {
      let { data } = this,
        total = 0;
      if (data && data.goods_list && data.goods_list.length) {
        total = data.goods_list.reduce((accumulator, currentValue) => {
          return (
            accumulator + currentValue.num * parseFloat(currentValue.price)
          );
        }, total);

        return total.toFixed(2).split(".");
      }

      return ["0", "00"];
    },
  },

  async onLoad(opi) {
    this.id = opi.id;
    try {
      let locationRes = await this.$store.dispatch("getLocation");
      this.longitude = locationRes.longitude;
      this.latitude = locationRes.latitude;
      this.getData();
    } catch (error) {
      this.$utils.toast(error);
    }
  },

  onShow() {
    this.Emit.$on("handle", this.handle);
  },

  onHide() {
    this.Emit.$off("handle");
  },

  onUnload() {
    this.Emit.$off("handle");
  },

  methods: {
    async getData() {
      let { longitude, latitude, id } = this;
      const res = await workerInfo({
        id,
        longitude,
        latitude,
      });
      uni.stopPullDownRefresh();

      if (!res.code) {
        let data = res.data.info;
        this.favorite_num = parseInt(data.favorite_num);
        if (data && data.goods_list && data.goods_list.length) {
          data.goods_list.forEach((e) => {
            e.num = 0;
          });
        }

        this.data = data;
      }
    },

    changeNum({ num, i }) {
      let item = this.data.goods_list[i];
      this.$set(item, "num", num);
    },

    handle(type, params) {
      switch (type) {
        case "swiper":
          this.swiperIndex = params;
          break;

        case "changeNum":
          this.changeNum(params);
          break;

        case "submit":
          this.submit();
          break;

        case "collect":
          this.collect();
          break;

        default:
          break;
      }
    },

    submit() {
      let { goods_list } = this.data;

      if (goods_list.every((el) => !el.num))
        return this.$utils.toast("请至少选择一项服务~");

      let goods = goods_list.filter((el) => el.num),
        params = [
          {
            product_type: 6,
            goods_list: goods.map((el) => {
              return {
                goods_id: el.id,
                num: el.num,
              };
            }),
          },
        ],
        str = `submit=${JSON.stringify(params)}&is_worker=1&worker_id=${
          this.data.id
        }`;

      uni.navigateTo({
        url: `/order/order-submit/order-submit?${str}`,
      });
    },

    async collect() {
      let { data, id: worker_id } = this;
      const res = await this.$allrequest.goods.favoriteGoods(
        {
          worker_id,
          type: 6,
        },
        true
      );
      if (res.code == 0) {
        uni.showToast({
          icon: "none",
          title: data.is_favorite ? "已取消收藏" : "收藏成功",
        });
        this.$set(data, "is_favorite", data.is_favorite ? 0 : 1);

        return;
      }
    },
  },

  onPullDownRefresh() {
    this.getData();
  },
};
</script>

<style lang="scss">
.page {
  padding-bottom: 130rpx;
  padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: #f2f2f2;
}
</style>
